<script setup>
import {ref, onMounted} from "vue";
import {exportTaskWork, getTaskWork} from "@/api/product/task";
import {ElMessage} from "element-plus";

const pageData = ref({
  searchParams: {
    barCode: "",
    invCode: "",
    mocCode: "",
    page: 1,
    size: 15,
    scaPro: "",
  },
  total: 0,
  list: [],
});
const search = () => {
  getTaskWork(pageData.value.searchParams).then(res => {
    pageData.value.list = [];
    setTimeout(() => {
      pageData.value.list = res.list;
      pageData.value.total = res.totalCount;
    }, 250);
  });
};
const exportWork = () => {
  exportTaskWork(pageData.value.searchParams).then(res => {
    let blob = new Blob([res], {
      type: "application/vnd.ms-excel,charset=UTF-8",
    });
    const link = document.createElement("a");
    // link.style.display = "none";
    link.href = URL.createObjectURL(blob);
    // 获取文件名
    link.download = "产品工序清单.xlsx";
    document.body.appendChild(link);
    link.click(); //会触发a标签的href
    link.remove(); // 一次性的，用完就删除a标签
    ElMessage.success("导出成功");
  });
};
const hisSelectPage = (e) => {
  pageData.value.searchParams.page = e;
  search();
};
const hisSelectSize = (e) => {
  pageData.value.searchParams.size = e;
  search();
};
onMounted(() => {
  // search();
});
</script>

<template>
  <div class="container">
    <div class="container-task">
      <div class="Modification">
        <div class="title">任务令产品编码工序状态</div>
        <div class="info">
          <el-form>
            <el-row :gutter="15">
              <el-col :span="5">
                <el-form-item label="任务令编号：">
                  <el-input v-model="pageData.searchParams.mocCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="u8产品料号：">
                  <el-input v-model="pageData.searchParams.invCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="产品编码：">
                  <el-input v-model="pageData.searchParams.barCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <el-button @click="search" type="primary" plain>查询</el-button>
              </el-col>
              <el-col :span="1">
                <el-button @click="exportWork" type="warning" plain>导出</el-button>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="5">
                <el-form-item label="工序：">
                  <el-select style="width: 300px;" v-model="pageData.searchParams.scaPro" class="m-2"
                             placeholder="Select" size="default">

                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-table :data="pageData.list" border style="width: 100%; height: 65vh">
            <el-table-column align="center" type="selection"></el-table-column>
            <el-table-column align="center" label="任务令" prop="mocCode"/>
            <el-table-column align="center" label="物料编号" prop="invCode"/>
            <el-table-column align="center" label="物料名称" prop="invName"/>
            <el-table-column align="center" width="550" label="规格" prop="invRemark"/>
            <el-table-column align="center" label="预计产量" prop="qty"/>
            <el-table-column align="center" label="产品编码" prop="barCode"/>
            <el-table-column align="center" label="状态" prop="proType"/>
            <el-table-column align="center" label="工序编号" prop="scaPro"/>
            <el-table-column align="center" label="工序完工" prop="productType"/>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
              v-model:current-page="pageData.searchParams.page"
              v-model:page-size="pageData.searchParams.size"
              :page-sizes="[15, 30, 45, 60, 75]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageData.total"
              @size-change="hisSelectSize"
              @current-change="hisSelectPage"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  padding: 0.625rem;
  width: 100%;
  height: 92vh;
  background-color: rgb(4, 30, 55);
  box-sizing: border-box;

  &::-webkit-scrollbar {
    display: none;
  }

  .container-task {
    display: flex;
    flex-direction: column;
    align-items: center;

    .Modification {
      margin-bottom: 0.9375rem;
      width: 100%;
      background-color: #04375d;
      border-radius: 0.3125rem;
      overflow: auto;
      box-shadow: 0.125rem 0.125rem 0.0625rem;

      .title {
        padding: 0.225rem 0 0.225rem 0.9375rem;
        width: 100%;
        background-image: linear-gradient(to right, #0e6dba, #034583);
        box-sizing: border-box;
        font-size: 0.95rem;
        color: #fff;
        display: flex;
        align-items: center;
      }

      .info {
        padding: 0.9375rem;
        width: 100%;
        height: 78vh;
        box-sizing: border-box;

        :deep(.el-form-item__label) {
          font-size: 0.75rem;
          color: #fff;
        }

        :deep(.el-input__wrapper) {
          background-color: rgb(9, 93, 164);
        }

        :deep(input::placeholder) {
          color: #fff;
        }

        :deep(.el-input__inner) {
          color: #fff;
        }

        /* 移入行颜色 */
        :deep(.el-table tbody tr:hover > td) {
          background-color: rgba(9, 93, 164, 0.2);
        }

        :deep(.el-table tr) {
          background-color: rgb(4, 55, 93);
          color: #fff;
        }

        :deep(.el-table--enable-row-hover .el-table__body tr:hover > td ) {
          background-color: #ff99004a;
        }

        :deep(td.el-table-fixed-column--right) {
          background-color: rgb(9, 93, 164) !important;
        }

        :deep(.el-table th.el-table__cell) {
          background-color: rgb(4, 30, 55);
          font-weight: 700;
        }

        :deep(.el-table) {
          background-color: transparent;
          --el-table-border-color: none;
          height: 15.625rem;
        }

        :deep(.el-table td, .el-table th) {
          border: 0.052083rem solid rgb(4, 30, 55) !important;
        }

        :deep(.el-textarea) {
          margin: 0.78125rem 0;
        }

        :deep(.el-textarea__inner) {
          background-color: rgb(4, 30, 55);
          color: #fff;
          width: 100%;
          height: 2.604167rem;
          text-align: center;
          line-height: 2.604167rem;
        }

        :deep(.el-textarea__inner::-webkit-scrollbar) {
          display: none;
        }

        :deep(.el-checkbox) {
          color: #fff;
        }

      }

      .pagination {
        padding: 0.9375rem;
        width: 100%;
        box-sizing: border-box;
      }
    }
  }
}
</style>